<template>
	<vCommonPage type="1" typeChose="1" title="医技预约" mzlx="2">
		<div slot="customContent" style="width: 100%;" class="yjyyChoseTime">
			<div class="CenterBox">
				<div class="patientName">患者：{{$store.state.user.userinfo.patientName}}</div>
				<div class="proName">项目名称：CT平扫（单个部位）</div>
			</div>

			<div class="contentBox" v-loading.fullscreen.lock="fullscreenLoading">
				<!-- <div v-for="(item,index) in dataList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
					:key="'info1-'+index" @click="clickItem(index,item)"
					:class="[item.isClick?'contentBoxItem click':'contentBoxItem',index>3&&index<=7?'marBtom':'',item.amountNum==0?'emptyItem':'']">
					{{item.timeValue}}
				</div> -->
				<div class="timeName" v-show="isHaslMorning">上午</div>
				<!-- 早上 -->
				<div class="contentBoxItemFather" v-loading.fullscreen.lock="fullscreenLoading">
					<div v-for="(item,index) in dataList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
						v-if="item.isMorning" :key="'info1-'+index" @click="clickItem(index,item)"
						:class="[item.isClick?'contentBoxItem click':'contentBoxItem']">
						{{item.timeValue}}
					</div>
				</div>
				<div class="emptyBox" v-show="isHaslMorning"></div>
				<!-- 下午 -->
				<div class="timeName" v-show="isHasNight">下午</div>
				<div class="contentBoxItemFather" v-loading.fullscreen.lock="fullscreenLoading">
					<div v-for="(item,index) in dataList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
						v-if="!item.isMorning" :key="'info1-'+index" @click="clickItem(index,item)"
						:class="[item.isClick?'contentBoxItem click':'contentBoxItem']">
						{{item.timeValue}}
					</div>
				</div>
			</div>

			<transition name="el-fade-in-linear">
				<div class="yjYyXx" v-show="yjYyXxShow">
					<div class="singTitle">
						医技预约信息
					</div>
					<div class="singCenter">
						<div class="singItem">
							<div class="singItemLeft">姓名</div>
							<div class="singItemRight">{{yjYyXObj.patientName}}</div>
						</div>
						<div class="singItem">
							<div class="singItemLeft">卡号</div>
							<div class="singItemRight">{{yjYyXObj.cardNo}}</div>
						</div>
						<div class="singItem">
							<div class="singItemLeft">项目名称</div>
							<div class="singItemRight">{{yjYyXObj.itemName}}</div>
						</div>
						<div class="singItem">
							<div class="singItemLeft">检查科室</div>
							<div class="singItemRight">{{yjYyXObj.checkDept}}</div>
						</div>
						<div class="singItem">
							<div class="singItemLeft">预约日期</div>
							<div class="singItemRight">{{yjYyXObj.appointmentDate}}</div>
						</div>
						<div class="singItem">
							<div class="singItemLeft">预约时间</div>
							<div class="singItemRight">{{yjYyXObj.appointmentTime}}</div>
						</div>
					</div>
					<div class="yjYyXBtomBtnBox">
						<el-button class="cancel" @click="yjYyXCancle()">取消</el-button>
						<el-button class="makeSure" @click="yjYyXMakeSure(0)">确认</el-button>
					</div>
				</div>
			</transition>


			<transition name="el-fade-in-linear">
				<div class="yjYyXx editBox" v-show="yjYyXxEditShow">
					<div class="singTitle">
						请确认医技预约修改信息
					</div>
					<div class="singCenter">
						<div class="singItem">
							<div class="singItemLeft">姓名:</div>
							<div class="singItemRight">{{yjYYEditObj.patientName}}
							</div>
						</div>
						<div class="singItem">
							<div class="singItemLeft">卡号:</div>
							<div class="singItemRight">{{yjYYEditObj.cardNo}}
							</div>
						</div>
						<div class="singItem">
							<div class="singItemLeft">项目名称:</div>
							<div class="singItemRight">{{yjYYEditObj.itemName}}
							</div>
						</div>
						<div class="singItem">
							<div class="singItemLeft">检查科室:</div>
							<div class="singItemRight">{{yjYYEditObj.checkDept}}
							</div>
						</div>
						<div class="singItem">
							<div class="singItemLeft">预约日期（旧）:</div>
							<div class="singItemRight xLine">{{yjYYEditObj.appointmentDateOld}}
							</div>
						</div>
						<div class="singItem">
							<div class="singItemLeft">预约日期（新）:</div>
							<div class="singItemRight">{{yjYYEditObj.appointmentDate}}
							</div>
						</div>
						<div class="singItem">
							<div class="singItemLeft">预约时间（旧）:</div>
							<div class="singItemRight xLine">{{yjYYEditObj.appointmentTimeOld}}
							</div>
						</div>
						<div class="singItem">
							<div class="singItemLeft">预约时间（新）:</div>
							<div class="singItemRight">{{yjYYEditObj.appointmentTime}}
							</div>
						</div>
						<!-- <div class="singItem" v-for="(item,index) in yjYYEditObj">
							<div class="singItemLeft">{{item.name}}</div>
							<div :class="index ==4 || index == 6?'singItemRight xLine':'singItemRight'">{{item.value}}
							</div>
						</div> -->
					</div>
					<div class="yjYyXBtomBtnBox">
						<el-button class="cancel" @click="yjYyEditCancle()">取消</el-button>
						<el-button class="makeSure" @click="yjYyXMakeSure(1)">确认</el-button>
					</div>
				</div>
			</transition>
			<vTip v-if="tipText" :tipText="tipText"></vTip>
			<div v-show="yjYyXxShow||yjYyXxEditShow||tipText" @click="hoddenBox()" class="yiny"></div>
			<div class="bottomBox">
				<el-button type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
				<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
				<el-button type="primary" v-show="totalPage>1" :class="totalPage == 1 ? 'huiBottom upPage':'blueBottom upPage'"
					@click="prePage()">
					上一页
				</el-button>
				<div class="pageBox" v-show="totalPage>1">
					<div class="curentPage">{{currentPage}}</div>
					/
					<div class="totalPage">{{totalPage}}</div>
				</div>
				<el-button type="primary" v-show="totalPage>1" :class="totalPage == 1 ? 'huiBottom downPage':'blueBottom downPage'"
					@click="nextPage()">
					下一页
				</el-button>
			</div>
		</div>
	</vCommonPage>
</template>
<script>
	//获取时间段剩余号源
	import {
		getTimeValueAmountList,
		yjjjConfirm
	} from "@api/apiBox/yjyy"
	import {
		Printerconf
	} from '@api/tools/rprinter.js'
	export default {
		name: "yjyyChoseDate",
		components: {},
		data() {
			return {
				fullscreenLoading: false,
				currentPage: 1, //初始页
				pagesize: 10, //    每页的数据
				dataList: [],
				totalPage: 0,
				yjYyXObj: [],
				yjYYEditObj: [],
				yjYyXxShow: false,
				isHasNight: false,
				isHaslMorning: false,
				yjYyXxEditShow: false,
				formData: {
					appointmentDate: this.$store.state.yjyy.appointmentDate,
					cardNo: this.$store.state.appointment.cardNo, //卡片编号
					cardType: this.$store.state.appointment.card.num, //卡片类别
					deptId: this.$store.state.yjyy.toBeReservedItem.deptId, //科室ID
					patientId: this.$store.state.user.userinfo.patientId, //患者ID
					termId: this.$store.state.terminfo.terminfo.termId //终端ID
				},
				pconf: new Printerconf(), //初始化凭条打印
				tipText:''
			};
		},
		methods: {
			prePage() {
				if (this.currentPage > 1) {
					this.currentPage--;
					this.calIsMorningAndNight();
				}
			},
			nextPage() {
				if (this.currentPage < this.totalPage) {
					this.currentPage++;
					this.calIsMorningAndNight();
				}
			},
			clickItem(index, item) {
				console.log(this.$store.state.yjyy, 'ooo',item)
				this.dataList[index].isClick = true;
				//显示修改弹窗
				if (this.$route.query.type == 2) {
					this.yjYYEditObj = {
						patientName: this.$store.state.user.userinfo.patientName,
						cardNo: this.$store.state.appointment.cardNo, //卡片编号
						itemName: this.$store.state.yjyy.toBeReservedItem.itemName, //项目名称
						checkDept: this.$store.state.yjyy.toBeReservedItem.checkDept, //检查科室
						appointmentDate: this.$store.state.yjyy.appointmentDate, //预约日期
						appointmentTime: item.timeValue, //预约时间
						appointmentDateOld: this.$store.state.yjyy.toBeReservedItem.appointmentDate, //预约日期 旧
						appointmentTimeOld: this.$store.state.yjyy.toBeReservedItem.appointmentInterval //预约时间 旧
					}
					this.yjYyXxEditShow = true;
					this.$store.dispatch("yjyy/updatePrintData", this.yjYYEditObj); //医技预约科室预约打印内容
				} else {
					this.yjYyXObj = {
						patientName: this.$store.state.user.userinfo.patientName,
						cardNo: this.$store.state.appointment.cardNo, //卡片编号
						itemName: this.$store.state.yjyy.toBeReservedItem.itemName, //项目名称
						checkDept: this.$store.state.yjyy.toBeReservedItem.checkDept, //检查科室
						appointmentDate: this.$store.state.yjyy.appointmentDate, //预约日期
						appointmentTime: item.timeValue //预约时间
					}
					this.yjYyXxShow = true;
					this.$store.dispatch("yjyy/updatePrintData", this.yjYyXObj); //医技预约科室预约打印内容
				}
			},
			hoddenBox() {
				this.yjYyXxShow = false;
				this.yjYyXxEditShow = false;
				this.tipText = "";
			},
			//给数组添加点击属性
			addCLick(list) {
				for (let i of list) {
					i['isClick'] = false;
					console.log(i.timeValue.split('-')[0].split(':')[0])
					if (i.timeValue.split('-')[0] > '14:00') {
						i['isMorning'] = false;
					} else {
						i['isMorning'] = true;
					}
				}
				return list;
			},
			async initData() {
				let data = {
					data: this.formData,
					that: this
				}
				const res = await getTimeValueAmountList(data);
				this.dataList = res.data;
				console.log(res, '数据！')
				this.dataList.sort(this.compare('timeValue'))
				this.dataList = this.addCLick(this.dataList);
				//判断数据这一页 是否都是上午排班
				this.calIsMorningAndNight();
				console.log(this.dataList, 'this.dataList')
				//type为2的时候 是修改时间  1为选择最早时间
				if (this.$route.query.type == 1) {
					if (this.dataList.length == 0) {
						this.tipText = "暂无号源！"
					} else {
						this.clickItem(0, this.dataList[0])
					}
				}
				this.totalPage = parseInt((this.dataList.length + this.pagesize - 1) / this.pagesize)
				//updategetRegInfo
			},
			calIsMorningAndNight() {
				this.calIsHasMorning();
				this.calIsHasNight();
			},
			calIsHasMorning() {
				this.isHaslMorning = false;
				let dataListLength = this.dataList.length;
				let searchList = 0;
				if (dataListLength < this.currentPage * this.pagesize) {
					searchList = dataListLength;
				} else {
					searchList = this.currentPage * this.pagesize;
				}
				for (let i = (this.currentPage - 1) * this.pagesize; i < searchList; i++) {
					if (this.dataList[i].isMorning) {
						this.isHaslMorning = true;
						return;
					}
				}
			},
			calIsHasNight() {
				this.isHasNight = false;
				let dataListLength = this.dataList.length;
				let searchList = 0;
				if (dataListLength < this.currentPage * this.pagesize) {
					searchList = dataListLength;
				} else {
					searchList = this.currentPage * this.pagesize;
				}
				for (let i = (this.currentPage - 1) * this.pagesize; i < searchList; i++) {
					if (!this.dataList[i].isMorning) {
						this.isHasNight = true;
						return;
					}
				}
			},
			compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					// if(value1 > value){
					// 	re
					// }
					return value1 > value2 ? 1 : -1;
				}
			},
			yjYyEditCancle() {
				this.yjYyXxEditShow = false;
			},
			//type == 0 为普通确定 1为修改
			async yjYyXMakeSure(type) {
				console.log(type)
				var makeSureData = {};
				if (type == 0) {
					makeSureData = {
						cardNo: this.$store.state.appointment.cardNo, //卡片编号
						cardType: this.$store.state.appointment.card.num, //卡片类别
						patientId: this.$store.state.user.userinfo.patientId, //患者ID
						termId: this.$store.state.terminfo.terminfo.termId, //终端ID
						yjyyDate: this.yjYyXObj.appointmentDate,
						yjyyInterval: this.yjYyXObj.appointmentTime,
						deptId: this.$store.state.yjyy.toBeReservedItem.deptId, //科室ID
					}
				} else if (type == 1) {
					makeSureData = {
						cardNo: this.$store.state.appointment.cardNo, //卡片编号
						cardType: this.$store.state.appointment.card.num, //卡片类别
						patientId: this.$store.state.user.userinfo.patientId, //患者ID
						termId: this.$store.state.terminfo.terminfo.termId, //终端ID
						yjyyDate: this.yjYYEditObj.appointmentDate,
						yjyyInterval: this.yjYYEditObj.appointmentTime,
						deptId: this.$store.state.yjyy.toBeReservedItem.deptId, //科室ID
					}
				}
				let data = {
					data: makeSureData,
					that: this
				}
				const res = await yjjjConfirm(data);
				console.log(this.pconf,'this.c')
				this.print(type);
				console.log(res)
				this.yjYyXxShow = false;
				this.yjYyXxEditShow = false;
			},
			yjYyXCancle() {
				this.yjYyXxShow = false;
			},
			//type == 0 为普通确定 1为修改  打印凭条
			async print(type) {
				// if(this.pconf == undefined){
				// 	this.tipText = '打印机不存在！请联系管理员';
				// 	return;
				// }
				if (type == 0) {
					console.log(this.$store.state.terminfo,'this.$store.state.terminfo')
					let printdata = {
						name: this.getPrintDeviceNameByPort('2'),
						type : 0
					}
					console.log(printdata,'--',this.getPrintNameByPort("2"))
					await this.pconf.yjyyprint(this.getPrintNameByPort("2"), this, printdata).then(res => {
						console.log(res)
						this.tipText = '打印成功，请领取您的医技预约凭条后离开，谢谢！';
						setTimeout(() => {
							this.$router.push('/');
						}, 3000);
					}).catch(e => {
						console.log(e)
						this.tipText = '打印失败，请联系管理员......';
					});
				} else if (type == 1) {
					let printdata = {
						name: this.getPrintDeviceNameByPort('2'),
						type : 1
					}
					await this.pconf.yjyyprint(this.getPrintNameByPort("2"), this, printdata).then(res => {
						console.log(res)
						this.tipText = '打印成功，请领取您的医技预约凭条后离开，谢谢！';
						setTimeout(() => {
							this.$router.push('/');
						}, 3000);
					}).catch(e => {
						console.log(e)
						this.tipText = '打印失败，请联系管理员......';
					});

				}
			},
			//获取打印机名称
			getPrintDeviceNameByPort(devtype) {
				let term = this.$store.state.terminfo.deviceConfs;
				console.log(term, 'name')
				for (let item of term) {
					console.log(item)
					if (item.deviceType == devtype) {
						return item.deviceName;
					}
				}
				return "";
			},
			//获取打印机型号
			getPrintNameByPort(devtype) {
				let term = this.$store.state.terminfo.deviceConfs;
				console.log(term, 'name')
				for (let item of term) {
					console.log(item)
					if (item.deviceType == devtype) {
						return item.deviceModel;
					}
				}
				return "";
			}
		},
		computed: {

		},
		watch: {

		},
		mounted() {},
		created() {
			this.initData()

		}
	};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.click {
		color: #FFFFFF !important;
		background: #46C349 !important;
	}

	.CenterBox {
		display: flex;
		width: 100%;
	}

	.left {
		width: 50%;
		text-align: left;
	}

	.patientName {
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		position: absolute;
		left: 39px;
	}

	.proName {
		position: absolute;
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		right: 39px;

	}

	.timeName {
		width: 100%;
		margin-top: 20px;
		padding-left: 35px;
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #A1ADBB;
	}

	.contentBoxItemFather {
		width: 100%;
		padding-left: 25px;
		display: flex;
		flex-wrap: wrap;
		margin-top: 0px;
		margin-bottom: 10px;
	}

	.contentBox {
		display: flex;
		flex-wrap: wrap;
		// justify-content: center;
		margin-top: 60px;
		margin-bottom: 50px;
	}

	.timeEmpty {
		margin-right: 50px;
	}

	.emptyBox {
		width: 100%;
		height: 50px;
	}

	.contentBoxItem {
		width: 18.6%;
		background: #FFFFFF;
		text-align: center;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 8px;
		font-size: 2.4vw;
		padding: 20px;
		margin: 10px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
	}

	.marBtom {
		margin-bottom: 55px !important;
	}

	.emptyItem {
		color: #435C7A !important;
		opacity: 0.5;
		background: #FFFFFF;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		opacity: 0.45;
		border-radius: 8px;
	}

	.yjYyXx {
		position: fixed;
		left: 272px;
		top: 1174px;
		width: 552px;
		height: 617px;
		background: #FFFFFF;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 8px;
		z-index: 3;

		.singTitle {
			display: flex;
			width: 100%;
			height: 77px;
			background: #EAF4F9;
			border-radius: 8px 8px 0px 0px;
			text-align: center;
			justify-content: center;
			align-items: center;
			font-size: 36px;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #435C7A;
		}

		.singCenter {
			height: 600px;
			width: 100%;
			overflow: auto;
		}



		.singItem {
			width: 100%;
			display: flex;
			margin-top: 19px;

			.singItemLeft {
				margin-left: 58px;
				font-size: 32px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #A1ADBB;
			}

			.singItemRight {
				margin-left: 28px;
				font-size: 32px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #435C7A;
			}

			.xLine {
				text-decoration: line-through;
			}

		}



		.yjYyXBtomBtnBox {
			display: flex;
			width: 100%;
			text-align: center;
			justify-content: center;
			align-items: center;
			margin-top: 20px;
			position: absolute;
			bottom: 20px;

			.cancel {
				width: 150px;
				height: 70px;
				background: #D7DEE3;
				box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
				border-radius: 8px;
				font-size: 32px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #435C7A;
				margin-right: 20px;

			}

			.makeSure {
				width: 150px;
				height: 70px;
				background: #46C349;
				box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
				border-radius: 8px;
				font-size: 32px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}

		}
	}

	.editBox {
		height: 727px;
		top: 1074px;
	}
</style>


<style>
	.yjyyChoseTime .tipText{
			width: 80%;
	}
</style>

